<script setup lang="ts" name="CategoryForm">
import { reactive, ref, watch } from "vue";
import { ElMessage, FormInstance, FormRules } from "element-plus";
import { getActivityUrlApi } from "@/addon/htscrm/api";
import { t } from "@/lang";
import { useClipboard } from "@vueuse/core";

/** 表单实例 */
const formRef = ref<FormInstance>();
/** 表单数据 */
const formData = ref<any>({
  live_push_url: "推流地址",
  live_url: "拉流地址",
  share_url: "活动链接",
  qrcode: "",
});

// 表单规则
const formRules = reactive<FormRules>({});
const type = ref();
/**
 * @description 初始化
 * @param id ID
 */
function init(row?: IActivityItem) {
  formRef.value?.resetFields();
  type.value = row?.type;
  if (row?.id) {
    getDetail(row.id);
  }
}

/**
 * @description 获取详情
 * @param id ID
 */
async function getDetail(id: ICategoryItem["id"]) {
  const res = await getActivityUrlApi(id);
  formData.value = res.data;
}

/**
 * @description 提交保存
 */
function submit() {
  return new Promise((resolve, reject) => {
    formRef.value?.validate(async (valid) => {
      if (valid) {
        resolve(true);
      } else {
        reject(new Error(t("form.validateError")));
      }
    });
  });
}

// 复制
const { copy, isSupported, copied } = useClipboard();
const copyEvent = (text: string) => {
  if (!isSupported.value) {
    // ElMessage({
    //   message: t("notSupportCopy"),
    //   type: "warning",
    // });
  }
  copy(text);
};
watch(copied, () => {
  if (copied.value) {
    ElMessage({
      message: t("copySuccess"),
      type: "success",
    });
  }
});

defineExpose({
  init,
  submit,
});
</script>

<template>
  <el-form
    class="f-form"
    ref="formRef"
    label-width="100px"
    :model="formData"
    :rules="formRules">
    <el-form-item
      v-if="type == 2"
      label="推流地址">
      <el-input
        v-model="formData.live_push_url"
        type="textarea"
        :rows="3"
        readonly
        @click="copyEvent(formData.live_push_url)" />
      <!-- <div class="text-[12px] text-[#999]">
        选中链接使用Ctrl + C与Ctrl + V复制
      </div> -->
    </el-form-item>
    <el-form-item
      v-if="type == 2"
      label="拉流地址">
      <el-input
        v-model="formData.live_url"
        type="textarea"
        :rows="3"
        readonly
        @click="copyEvent(formData.live_url)" />
      <!-- <div class="text-[12px] text-[#999]">
        选中链接使用Ctrl + C与Ctrl + V复制
      </div> -->
    </el-form-item>
    <el-form-item label="活动链接">
      <el-input
        v-model="formData.share_url"
        type="textarea"
        :rows="3"
        readonly
        @click="copyEvent(formData.share_url)" />
      <!-- <div class="text-[12px] text-[#999]">
        选中链接使用Ctrl + C与Ctrl + V复制
      </div> -->
    </el-form-item>
    <el-form-item
      label="活动二维码"
      prop="hide">
      <el-image :src="formData.qrcode"></el-image>
    </el-form-item>
  </el-form>
</template>

<style lang="scss" scoped>
.el-image {
  width: 200px;
  height: 200px;
}
</style>
